<!doctype html>
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>laytpl前端模版引擎 - 在线演示 - Layui</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes"> 
  <meta name="format-detection" content="telephone=no"> 
  <link rel="stylesheet" href="/layui/dist/css/layui.css" media="all"> 
  <link rel="stylesheet" href="/static/css/global.css" media="all"> 
 </head> 
 <body> 
  <div class="layui-layout layui-layout-admin"> 
   <div class="layui-header header header-demo"> 
    <div class="layui-fluid"> <a class="logo" href="/index.html"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
     <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div> 
     <div class="layui-hide-xs site-notice"></div> 
     <ul class="layui-nav" id="LAY_NAV_TOP"> 
      <li class="layui-nav-item "> <a href="/doc/index.html">文档</a> </li> 
      <li class="layui-nav-item layui-this"> <a href="/demo/index.html">示例</a> </li> 
      <li class="layui-nav-item"> <a href="javascript:;"> <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 周边 </a> 
       <dl class="layui-nav-child layui-nav-child-c"> 
        <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a> 
         <hr> 
        </dd> 
        <dd lay-unselect>
         <a href="/alone.html" target="_blank" lay-unselect>独立组件</a>
        </dd> 
        <dd lay-unselect>
         <a href="/extend/" target="_blank">扩展组件</a>
        </dd> 
       </dl> </li> 
      <li class="layui-nav-item layui-hide-xs"> <a href="//gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a> </li> 
     </ul> 
    </div> 
   </div> <!-- 让IE8/9支持媒体查询，从而兼容栅格 --> <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> 
   <div class="layui-side layui-bg-black"> 
    <div class="layui-side-scroll"> 
     <ul class="layui-nav layui-nav-tree site-demo-nav"> 
      <li class="layui-nav-item layui-nav-itemed"> <a class="javascript:;" href="javascript:;">演示</a> 
       <dl class="layui-nav-child"> 
        <dd> <a href="/demo/index.html">调试预览</a> 
        </dd> 
       </dl> </li> 
      <li class="layui-nav-item layui-nav-itemed"> <a class="javascript:;" href="javascript:;">布局</a> 
       <dl class="layui-nav-child"> 
        <dd class=""> <a href="/demo/grid.html">栅格</a> 
        </dd> 
        <dd class=""> <a href="/demo/admin.html">框架</a> 
        </dd> 
       </dl> </li> 
      <li class="layui-nav-item layui-nav-itemed"> <a class="javascript:;" href="javascript:;">基本元素</a> 
       <dl class="layui-nav-child"> 
        <dd class=""> <a href="/demo/button.html">按钮</a> 
        </dd> 
        <dd class=""> <a href="/demo/form.html">表单</a> 
        </dd> 
        <dd class=""> <a href="/demo/nav.html">导航 / 面包屑</a> 
        </dd> 
        <dd class=""> <a href="/demo/menu.html">基础菜单</a> 
        </dd> 
        <dd class=""> <a href="/demo/tab.html">选项卡</a> 
        </dd> 
        <dd class=""> <a href="/demo/progress.html">进度条</a> 
        </dd> 
        <dd class=""> <a href="/demo/panel.html">面板</a> 
        </dd> 
        <dd class=""> <a href="/demo/badge.html">徽章</a> 
        </dd> 
        <dd class=""> <a href="/demo/timeline.html">时间线</a> 
        </dd> 
        <dd class=""> <a href="/demo/table-element.html">静态表格</a> 
        </dd> 
        <dd class=""> <a href="/demo/anim.html">动画</a> 
        </dd> 
        <dd class=""> <a href="/demo/auxiliar.html">辅助元素</a> 
        </dd> 
       </dl> </li> 
      <li class="layui-nav-item layui-nav-itemed"> <a class="javascript:;" href="javascript:;">组件示例</a> 
       <dl class="layui-nav-child"> 
        <dd class=""> <a href="/demo/layer.html"> 弹出层 </a> 
        </dd> 
        <dd class=""> <a href="/demo/laydate.html"> 日期与时间选择 </a> 
        </dd> 
        <dd class=""> <a href="/demo/table.html"> 数据表格 </a> 
        </dd> 
        <dd class=""> <a href="/demo/laypage.html"> 分页 </a> 
        </dd> 
        <dd class=""> <a href="/demo/dropdown.html"> 下拉菜单 </a> 
        </dd> 
        <dd class=""> <a href="/demo/upload.html"> 文件上传 </a> 
        </dd> 
        <dd class=""> <a href="/demo/transfer.html"> 穿梭框 </a> 
        </dd> 
        <dd class=""> <a href="/demo/tree.html"> 树形组件 </a> 
        </dd> 
        <dd class=""> <a href="/demo/colorpicker.html"> 颜色选择器 </a> 
        </dd> 
        <dd class=""> <a href="/demo/slider.html"> 滑块 </a> 
        </dd> 
        <dd class=""> <a href="/demo/rate.html"> 评分 </a> 
        </dd> 
        <dd class=""> <a href="/demo/carousel.html"> 轮播 </a> 
        </dd> 
        <dd class="layui-this"> <a href="/demo/laytpl.html"> 模板引擎 </a> 
        </dd> 
        <dd class=""> <a href="/demo/flow.html"> 流加载 </a> 
        </dd> 
        <dd class=""> <a href="/demo/util.html"> 工具模块 </a> 
        </dd> 
        <dd class=""> <a href="/demo/code.html"> 文本行修饰 </a> 
        </dd> 
       </dl> </li> 
      <li class="layui-nav-item" style="height: 30px; text-align: center"></li> 
     </ul> 
    </div> 
   </div> 
   <div class="layui-body site-demo"> 
    <div class="layui-main"> 
     <blockquote class="layui-elem-quote">
       修改下面的数据和模版，可直接呈现渲染后的结果。模板语法见：<a class="layui-btn layui-btn-normal" href="/doc/modules/laytpl.html" target="_blank">laytpl文档</a> 
     </blockquote> 
     <div class="site-demo-laytpl"> 
      <div> <span>数据</span> <span>模版</span> 
      </div> <textarea class="site-demo-text" id="data">
{
  "title": "Layui常用模块"
  ,"list": [
    {
      "modname": "弹层"
      ,"alias": "layer"
      ,"site": "layer.layui.com"
    }
    ,{
      "modname": "表单"
      ,"alias": "form"
    }
    ,{
      "modname": "分页"
      ,"alias": "laypage"
    }
    ,{
      "modname": "日期"
      ,"alias": "laydate"
    }
    ,{
      "modname": "上传"
      ,"alias": "upload"
    }
  ]
}
        </textarea> <textarea class="site-demo-text" id="tpl">
&lt;h3&gt;{{ d.title }}&lt;/h3&gt;
&lt;ul&gt;
{{#  layui.each(d.list, function(index, item){ }}
  &lt;li&gt;
    &lt;span&gt;{{ item.modname }}&lt;/span&gt;
    &lt;span&gt;{{ item.alias }}：&lt;/span&gt;
    &lt;span&gt;{{ item.site || '' }}&lt;/span&gt;
  &lt;/li&gt;
{{#  }); }}
 
{{#  if(d.list.length === 0){ }}
  无数据
{{#  } }} 
&lt;/ul&gt;
        </textarea> 
     </div> 
     <div class="site-demo-tplres"> 
      <h2 class="site-demo-tplh2">视图结果</h2> 
      <div class="site-demo-tplview" id="view"></div> 
     </div> 
     <blockquote class="layui-elem-quote" style="margin-top: 30px;">
       更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。 
     </blockquote> 
     <div style="margin: 15px 0 100px; padding-bottom: 100px;"> <!-- 通用-970*90 --> 
      <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins> 
     </div> 
    </div> 
   </div> 
   <div class="layui-footer footer footer-demo"> 
    <p> Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p> 
    <p> </p>
   </div> 
   <script>
window.global = {
  pageType: 'demo'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script> 
   <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> 
   </div> 
   <div class="site-mobile-shade"></div> 
   <script src="/layui/dist/layui.js" charset="utf-8"></script> 
   <script>
layui.config({
  base: '/static/lay/modules/layui/'
  ,version: '1632659138225'
}).use('global');
</script> 
  </div> 
  <script>
layui.use('laytpl', function(laytpl){
  
  var view = document.getElementById('view')
  ,controller = function(){
    try{
      var html = laytpl(tpl.value).render(JSON.parse(data.value));
      view.innerHTML = html;
    } catch(e){
      view.innerHTML = '<span style="color: #c00;">'+ e.toString() + '</span>';
    }
  };
  
  controller();
  
  layui.each(document.getElementsByTagName('textarea'), function(index, item){
    item.onkeyup = function(){
      controller();
    }
  });
  
});
</script>  
 </body>
<script src="/common/common.js"></script>
</html>